<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表单元素</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="{{ADMIN_PATH}}layui/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="{{ADMIN_PATH}}layui/layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="{{ADMIN_PATH}}ztree/css/zTreeStyle/zTreeStyle.css" media="all">
</head>
<body>

<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">菜单树</div>
        <div class="layui-card-body layui-row layui-col-space10">
          <ul id="treeDemo" class="ztree"></ul>
        </div>
      </div>
    </div>
    <div class="layui-col-md9">
      <div class="layui-card">
        <div class="layui-card-header">菜单操作</div>
        <div class="layui-card-body">
          <form class="layui-form layui-form-pane" action="" lay-filter="component-form-element">
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg12">
                <label class="layui-form-label">菜单名称：</label>
                <div class="layui-input-block">
                  <input type="text" name="title" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-col-lg4">
                <label class="layui-form-label">上级菜单：</label>
                <div class="layui-input-block">
                  <select name="pid"  lay-filter="aihao">
                    <option value="0">顶级菜单</option>
                    @foreach($tree as $tk=>$tv)
                      <option value="{{$tv['id']}}">{!! $tv['title_show'] !!}</option>
                    @endforeach
                  </select>
                </div>
              </div>
                <div class="layui-col-lg4">
                    <label class="layui-form-label">图标：</label>
                    <div class="layui-input-block">
                        <input type="text" name="icon" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-lg4">
                    <button class="layui-btn layui-btn-primary layuiadmin-btn-list" data-type="selecticon">选择图标</button>
                </div>
            </div>

            <div class="layui-form-item">
              <div class="layui-col-lg4">
                <label class="layui-form-label">联接：</label>
                <div class="layui-input-block">
                  <input type="text" name="url" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
              </div>
                <div class="layui-col-lg4">
                    <label class="layui-form-label">分组：</label>
                    <div class="layui-input-block">
                        <input type="text" name="group" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
              <div class="layui-col-lg6">
                <label class="layui-form-label">排序：</label>
                <div class="layui-input-inline">
                  <input type="text" name="sort" lay-verify="required" placeholder="0" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>


            <div class="layui-form-item">
              <label class="layui-form-label">是否隐藏：</label>
              <div class="layui-input-block">
                <input type="checkbox" name="hide" value="1" lay-skin="switch" lay-text="是|否">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">仅开发者模式可见：</label>
              <div class="layui-input-block">
                <input type="checkbox" name="is_dev" value="1" lay-skin="switch" lay-text="是|否">
              </div>
            </div>


              <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">其它信息</label>
                  <div class="layui-input-block">
                      <textarea name="tip" placeholder="请输入其它信息" class="layui-textarea"></textarea>
                  </div>
              </div>
            <input type="hidden" name="id" class="input_id" value="" />
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="component-form-element">保存菜单</button>
                <button type="reset" class="layui-btn layui-btn-primary">添加</button>
                <button class="layui-btn layuiadmin-btn-list layui-btn-danger" data-type="del_menu">删除菜单</button>
                <button class="layui-btn layuiadmin-btn-list layui-btn-warm" data-type="subadd">添加子菜单</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js"></script>
<script src="{{ADMIN_PATH}}ztree/js/jquery-1.4.4.min.js"></script>
<script src="{{ADMIN_PATH}}ztree/js/jquery.ztree.core.js"></script>
<script>
    var save_url="{{url('admin/menu/save')}}"
    var edit_url="{{url('admin/menu/edit')}}"

    var submit_form;
    layui.config({
        base: '{{ADMIN_PATH}}layui/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,form = layui.form;
        //=========================按钮事件=======================
        $('.layui-btn.layuiadmin-btn-list').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            return false;
        });

        var active = {
            del_menu: function(){
                layer.msg("删除");
                return false;
            },
            subadd: function(){
                var id=$(".input_id").val();
                //清空表单元素值
                submit_form.val("component-form-element",{title:'',url:'',icon:'',group:'',sort:'',hide:'',is_dev:'',tip:'',id:'',pid:id});
                return false;
            },
            selecticon:function(){
                layer.msg("aaaaaaaaaa");
                return false;
            }
        };
        form.render(null, 'component-form-element');
        element.render('breadcrumb', 'breadcrumb');

        form.on('submit(component-form-element)', function(data){
            $.post(save_url, data.field, success, "json");
            return false;
        });

        //========================表单数据返回处=====================================
        function success(res){
            if(res.status==200){
                 layer.msg("保存成功");
            }else{
                layer.msg("操作失败");
            }
        }
        submit_form=form;

    });
</script>

<SCRIPT type="text/javascript">
    <!--
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {

            onClick: onClick
        }
    };

    var zNodes ={!! $menu_list !!};
    var  className = "dark";

    function onClick(event, treeId, treeNode, clickFlag) {
        $.ajax({
            type: 'POST',
            url: edit_url,
            data: {id:treeNode.id},
            async: false,
            dataType: 'json',
            success: function (res) {
                if (res.status==200) {
//========================表单数据宣染=====================================
                    submit_form.val("component-form-element",res.data);
                } else {
                    layer.msg(res.msg);
                }
            },
            error: function () {
                layer.msg("异常");
            }
        });
    }
    function getTime() {
        var now= new Date(),
            h=now.getHours(),
            m=now.getMinutes(),
            s=now.getSeconds();
        return (h+":"+m+":"+s);
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    //-->

</SCRIPT>
</body>
</html>